<template>
	<view class="onlineOrder">
		<form class="form" @submit="formSubmit" @reset="formReset">
			<view class="row b-b">
				<view class="title">医院</view>
				<view class="cont select">
					<input class="uni-input" :value="form.hospitalName" @focus="showSelectPicker" placeholder="请选择"/>
					<select-picker ref="selectPicker" :picker-list="hospitalList" range-key="name" @onConfirm="onConfirmSelect" />
				</view>
				<text class="cell-more iconfont icon-you"></text>
			</view>
			<view class="row b-b">
				<view class="title">陪诊项目</view>
				<view class="cont select">
					<input v-if="!accompanySelect.length" class="uni-input" :value="form.accompanyContent" @focus="showSelectPicker2" placeholder="新增项目"/>
					<view v-else class="selectBox" @click="showSelectPicker2">
						<view class="item" v-for="(item,index) in accompanySelect" :key="index">
							<text>{{ item.name }}</text>
							<text class="iconfont icon-delete" @click.stop="deleteHandler(index)"></text>
						</view>
					</view>
					<select-picker ref="selectPicker2" :picker-list="accompanyList" range-key="name" @onConfirm="onConfirmSelect2" />
				</view>
				<text class="cell-more iconfont icon-you" @click="showSelectPicker2"></text>
			</view>
			<view class="row b-b" hover-class="cell-hover" :hover-stay-time="50">
				<view class="title">是否接送</view>
				<view class="cont switch">
					<switch :checked="isDefault" color="#007AFF" @change="switchChange"/>
				</view>
			</view> 
			<view class="row b-b" v-if="!addressData.addressee&&isloadAddress" @click="toAddress('add')">
				<view class="title">去填写地址</view>
				<view class="cont"></view>
				<text class="cell-more iconfont icon-you"></text>
			</view>
			<block>
				<view class="row b-b">
					<view class="title">联系人</view>
					<view class="cont">
						<input class="uni-input" :disabled="true" v-model="addressData.addressee" placeholder="请输入" :maxlength="10" />
					</view>
				</view>
				<view class="row b-b">
					<view class="title">联系方式</view>
					<view class="cont">
						<input type="number" :disabled="true" class="uni-input" v-model="addressData.addresseePhone" placeholder="请输入" :maxlength="11" />
					</view>
				</view>
				<view class="row b-b" @click="toAddress('select')">
					<view class="title">{{['','接送','碰头'][form.isPickup]}}地址</view>
					<view class="cont select">
						<view class="uni-input">{{addressData.region.join(' ')}}</view>
						<text class="cell-more iconfont icon-you"></text>
					</view>
				</view>
				<view class="row b-b">
					<textarea class="addressText" :disabled="true" v-model="addressData.address" placeholder="请填写详细地址" :maxlength="200" />
				</view>
			</block>
			<view class="orderText">
				<view class="title">备注内容</view>
				<view class="cont">
					<textarea
          v-model="form.description"
          placeholder="请填写备注内容…"
          :maxlength="300"  />
				</view>
			</view>
			<view class="fixed-bottom">
				<view class="b-card">
					<button class="add-btn no-border" form-type="submit">去下单</button>
				</view>
			</view>
		</form>
		
		<pay-pop ref="payPicker" :order-id="orderId" @onConfirm="successFun" />
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import areaPicker from "@/components/area-picker.vue"
	import selectPicker from "@/components/select-picker.vue"
	import UniClass from "./components/class.vue"
	import payPop from "@/components/pay-pop.vue"
	export default {
		components:{
			areaPicker,
			selectPicker,
			UniClass,
			payPop
		},
		data() {
			return {
				isloadAddress:false,
				addressData: {
					consigneeName:'',
					consigneeMobile:'',
					addressDetail:'',
					region:[]
				},
				isDefault:true, // 是否接送
				form:{
					orderAmount: 0.1,
					hospitalId:'',
					hospitalName:'',
					accompanyType: '', // 陪诊项目
					accompanyContent: '',
					addressId:'',
					description:'',
					isPickup: 1 // 1  接送  2 不接送
				},
				region: ['北京市','北京市','东城区'],
				accompanyList:[],
				accompanySelect:[],
				hospitalList:[],
				classObj:{},
				orderId:"" //下单后返回订单id
			}
		},
		onLoad(options) {
			if(options) {
				let params = JSON.parse(decodeURIComponent(options.params))
				this.form = {...this.form,...params}
				this.accompanySelect = params.accompanySelect || []
				console.log(this.accompanySelect)
			}
			this.listConsignee() // 获取收货地址
			this.getHospital() // 医院
			this.listAccompany() // 项目
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			async getHospital(){
				const {code,data} = await this.$apis.postApi('/hospital/listName')
				if(code==200){
					this.hospitalList = data
				}
			},
			async listAccompany(){
				const params = {
					hospitalId: this.form.hospitalId
				}
				const {code,data} = await this.$apis.postApi('/hospital/listAccompanyName',params)
				if(code==200){
					this.accompanyList = data
				}
			},
			toAddress(type) {
				uni.navigateTo({
					url: type=='add'?`/userPages/addressManage?type=add&&source=1`:'/userPages/address?source=1'
				})
			},
			async listConsignee() {
				const params = {
					userId: this.userInfo.userId
				}
				const { code,data } = await this.$apis.postApi('/address/getDefault',params)
				this.isloadAddress = true
				if(code == 200) {
					const region = [data.provinceCode,data.cityCode,data.districtCode]
					data.region = region
					this.addressData = data
					this.addressData.address = data.address.replace('|',' ')
				} else {
					this.addressData = {}
				}
			},
			deleteHandler(index) {
				this.accompanySelect.splice(index,1)
			},
			// 选择医院
			showSelectPicker() {
				this.$refs.selectPicker.showPicker();
			},
			onConfirmSelect(e) {
				this.form.hospitalName = e.name
				this.form.hospitalId = e.id
				this.listAccompany()
			},
			// 选择项目
			showSelectPicker2() {
				this.$refs.selectPicker2.showPicker();
			},
			onConfirmSelect2(e) {
				if(!this.accompanySelect.some(item=>item.id==e.id)){
					this.accompanySelect.push(e)
				}
			},
			switchChange(e){
				this.isDefault = e.target.value
				this.form.isPickup=this.isDefault?1:2
			},
			formSubmit() {
				this.form.addressId = this.addressData.addressId
				this.form.userId = this.userInfo.userId
				if(!this.accompanySelect.length){
					this.$api.msg('请选择陪诊项目');
					return
				}
				this.form.accompanyType = this.accompanySelect.map(item=>item.id).join(',')
				this.form.accompanyContent = this.accompanySelect.map(item=>item.name).join(',')
				let data = { ...this.form }
				if(!data.addressId){
					this.$api.msg('请选择收货地址');
					return;
				}
				// if(!data.description){
				// 	this.$api.msg('请填写备注内容');
				// 	return;
				// }

				// this.orderId=2280
				if(this.orderId) {
					this.$refs.payPicker.showPicker()
					return
				}
				this.$apis.postApi('/order/add',data).then(({code,data,message}) => {
					if(code==200){
							this.orderId = data.orderId
							setTimeout(() => {
								this.$refs.payPicker.showPicker()
							}, 100);
					} else {
						this.$api.msg(message);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			successFun(){
				this.$api.msg('下单成功');
				this.$api.prePage().loadData('refresh')
				setTimeout(()=>{
					uni.navigateBack()
				}, 800)
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>
<style lang='scss' scoped>
.onlineOrder{
	padding: 20upx;
}
.form{
	padding: 10upx 24upx;
	background: #fff;
	display: block;
  min-height: calc(100vh - 60upx);
  box-sizing: border-box;
  border-radius: 16upx;
	.btn-link{
		height: 88upx;
		margin: 20upx 0 48upx;
	}
  .title{
    font-size: 30upx;
    color: #000000;
    font-weight: 400;
    width: 130upx;
    white-space: nowrap;
  }
	.row{
		padding:20upx 0;
		min-height: 90upx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.cont{
			display: flex;
			align-items: center;
			position: relative;
			flex:1;
			text-align: right;
			textarea{
				height: 100upx;
				font-size: 30upx;
				text-align: left;
			}
			switch{
				margin-left: auto;
			}
		}
		.uni-input{
			width: 100%;
			font-size: 30upx;
		}
		.addressText{
      height: 120upx;
      width: 100%;
    }
	}
  .orderText{
    .title{
      margin: 30upx 0 15upx;
    }
    textarea{
      height: 264upx;
      width: 100%;
      padding: 24upx;
      background: #F6F9FF;
      border-radius: 16upx;
      font-size: 30upx;
      box-sizing: border-box;
    }
  }
	.upload-box{
		.title{
			margin: 40upx 0 20upx;
		}
	}

	/deep/{
		.upload-content{
			.upload-add-btn,.upload-item{
				width: 320upx;
				height: 202upx;
			}
		}
	}
}
.selectBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	flex: 1;
	.item{
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
		margin: 4rpx;
		padding: 4rpx 10rpx;
	}
	.icon-delete {
		font-size: 24rpx;
		color: darkred;
		margin-left: 10rpx;
	}
}
</style>
